@import url(./index.css);
@import url(./header.css);
@import url(./footer.css);

body {
    background-image: url(../images/index-top-background.png);
    background-repeat: no-repeat;
    background-size: 100vw cover;
    background-color: #71C4CC;
}
body>header.header {
    padding-bottom: 50rem;
}
.search-wrapper {
    width: 1260rem;
    margin: 0 auto 30rem;
}
.search-wrapper>input {
    width: 470rem;
    height: 50rem;
    padding: 10rem 12rem;
    background-color: #fff;
    border: 2px solid #576FFA;
    font-size: 18rem;
    border-radius: 8rem;
    outline: none;
}
.search-wrapper>.search-btn {
    width: 140rem;
    height: 50rem;
    background-color: #576FFA;
    text-align: center;
    line-height: 50rem;
    color: #fff;
    margin-left: 16rem;
    border-radius: 8rem;
    letter-spacing: 2rem;
    font-size: 18rem;
    cursor: pointer;
}
.row {
    padding: 10rem 20rem;
}
.row>.card {
    width: 300rem;
    height: 330rem;
    background-color: #fff;
    border-radius: 8rem;
    margin: 0 10rem;
    cursor: pointer;
    padding: 0 16rem 10rem;
    overflow: hidden;
}
.gift-img {
    width: calc(100% + 32rem);
    height: 220rem;
    object-fit: cover;
    margin: 0 -16rem;
    border-radius: 8rem 8rem 0 0;
    display: block;
}
.card>.name {
    padding: 10rem 0 8rem;
    font-size: 16rem;
    font-weight: bold;
}
.card .btn {
    width: 90rem;
    height: 30rem;
    border-radius: 20rem;
    text-align: center;
    line-height: 30rem;
    color: #fff;
    font-size: 14rem;
    background-color: #576FFA;
    margin-left: 5rem;
}
.card .price {
    font-size: 26rem;
    font-weight: bold;
    color: #F08638;
}